<!DOCTYPE html> <html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Roads API </title>
    <style>
      html, body, #map {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

      #map {
        height: 800px;
        border: 1px solid #999;
      }

     

    </style>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
  src="http://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>
  
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJE_o5NMpI3h6whvGqPXfhL8-u_xeyV80
&libraries=drawing,places"></script>
      
    <script>
var apiKey = 'AIzaSyA5A5PMl9zfSMmAiu1QyRXZR8TY9COPSKc';

var map;
var drawingManager;
var placeIdArray = [];
var polylines = [];
var snappedCoordinates = [];

function initialize() {
  var mapOptions = {
    zoom: 12,
    center: {lat: {{$centerpoint['lat']}}, lng: {{$centerpoint['lng']}} }
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  

  

  // Snap-to-road when the polyline is completed.
 
    runSnapToRoad();
 

}

// Snap a user-created polyline to roads and draw the snapped path
function runSnapToRoad() {
  var pathValues = [];
  // for (var i = 0; i < path.getLength(); i++) {
  //   console.info(typeof(path.getAt(i).toUrlValue()));

  //   pathValues.push(path.getAt(i).toUrlValue());
  // }

  @foreach($list as $point)

  var point = "{{round($point['lat'],4).','.round($point['lng'],4)}}";
  pathValues.push(point);
  @endforeach

  var i,j,temparray,chunk = 96;
  for (i=0,j=pathValues.length; i<j;) {

      temparray = pathValues.slice(i,i+chunk);
      if(i>0) {
        temparray.unshift(pathValues[i-1]);
        temparray.unshift(pathValues[i-2]);        
        temparray.unshift(pathValues[i-3]);  
      }
      console.info(temparray);
      
      $.get('https://roads.googleapis.com/v1/snapToRoads', {
        interpolate: true,
        key: apiKey,
        path: temparray.join('|')
      }, function(data) {
        processSnapToRoadResponse(data);
        drawSnappedPolyline();
       
      });
      i+=chunk;
  }
  //console.info(pathValues.length);return false;
  //console.info(pathValues.join('|'));

 
}

// Store snapped polyline returned by the snap-to-road service.
function processSnapToRoadResponse(data) {
  //console.info(data);
  snappedCoordinates = [];
  placeIdArray = [];
  for (var i = 0; i < data.snappedPoints.length; i++) {
    var latlng = new google.maps.LatLng(
        data.snappedPoints[i].location.latitude,
        data.snappedPoints[i].location.longitude);
    snappedCoordinates.push(latlng);
    placeIdArray.push(data.snappedPoints[i].placeId);
  }
}

// Draws the snapped polyline (after processing snap-to-road response).
function drawSnappedPolyline() {
  var snappedPolyline = new google.maps.Polyline({
    path: snappedCoordinates,
    strokeColor: 'blue',
    strokeWeight: 3
  });

  snappedPolyline.setMap(map);
  polylines.push(snappedPolyline);
}








$(window).load(initialize);

    </script>
  </head>

  <body>
  <div class="container">
   
    <div class="row">
    <div class="col-md-6">
          <!-- general form elements -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">Upload Excel File</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form role="form" method="post" enctype="multipart/form-data">
              <div class="box-body">
               
             
                <div class="form-group">
                  <label for="exampleInputFile">Excel</label>
                  <input type="file" name="excel" id="exampleInputFile">

                  <p class="help-block"></p>
                </div>
              
              </div>
              <!-- /.box-body -->

              <div class="box-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
              </div>

               {{ csrf_field() }}
            </form>
          </div>
          <!-- /.box -->

        

         

          
                </div>
                <!-- /.col-lg-6 -->
              </div>
              <!-- /.row -->

             
       <hr/>       
        
      <div id="map"></div>
     
      <div class="row">{{$list->links()}}</div>

</div>

  </body>
</html>